<template>
  <div class="top">
    <!-- 最顶上一层 -->
    <div class="topWrapper">
      <div class="topMiddle">
        <div class="topMiddleLeft">
          <i class='icon iconfont icon-API'></i><span>中国联通，让一切自由沟通</span>
        </div>
        <div class="topMiddleRight">
          <ul class="ulWrapper">
            <li class="liItem liItemOne"><i class='icon iconfont icon-QQ'></i><span>联系客服</span></li>
            <li class="liItem" style="color: #ED6D00" v-if="showTop" @click="handleMyHome()">你好，普通会员{{nickname}}</li>
            <li class="liItem" style="color: #ED6D00" v-else @click="handleGoRegeister()">立即注册</li>
            <li class="liItem" v-if="showTop" @click="handleQuit()">退出</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- logo层 -->
    <div class="logoWrapper">
      <div class="logoAndSearch">
        <div class="logo" :style="{backgroundImage:`url(${logoImageUrl})`}" @click="handleGoHome()">
        </div>
        <div class="search">
          <div class="searchLeft">
            <el-input placeholder="请输入内容" v-model="inputContent" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <div class="historyWrapper">
              <span>三网短线</span>
              <span>天气预报</span>
              <span>快递</span>
              <span>违章</span>
              <span>微信</span>
              <span>验证码</span>
              <span>身份证</span>
              <span>银行卡</span>
              <span>手机归属</span>
              <span>手机号实名</span>
            </div>
          </div>
          <div class="personal">
            <el-button plain @click.native="handleGoLogin()"><i class='icon iconfont icon-user-1'></i>&nbsp;<span>{{loginStatus}}</span></el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 菜单层 -->
    <div class="menuWrapper">
      <div class="menuMiddle">
        <div class="menuAll">
          <div @mouseover="getShowMenuOver()" @mouseout="getShowMenuOut()" class="menuTemp">
            <div class="menuItemOne">
              <div><span>API分类导航</span></div>
              <div><i class='icon iconfont icon-mulu' style="font-size: 22px"></i></div>
            </div>
            <!-- 左侧菜单绝对定位 -->
            <div class="classification">
              <div class="classificationItem" v-if="showMenu" v-for="item in classifiction" :key="item.id" :class="{active: item.id === selectedClassfication}" @mouseover="getCategory(item.id)" @mouseout="getCategoryOut()">
                <div class="classficationTitle">
                  {{item.type}}
                </div>
                <div class="classficationIcon">
                  <i class='icon iconfont icon-dayu' style="font-size: 22px"></i>
                </div>
                <!-- 菜单右边div -->
                <div class="rightContent" v-if="selectedClassfication === item.id">
                  <div class="rightTitle">
                    <div class="rightImageWrapper" :style="{backgroundImage:`url(${item.iconUrl})`}">
                    </div>
                    <div class="textWrapper">
                      <span>{{item.type}}</span>
                    </div>
                  </div>
                  <!-- 菜单具体分类实例 -->
                  <div class="rightCategory">
                    <ul class="ulWrapper">
                      <li v-for="element in item.childNode" :key="element.index" class="ulliItem">
                        {{element.type}}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="menuItemAll">
            <div class="menuItem" v-for="item in navList" :key="item.name" :class="{active: item.name === selectedNav}" @click="clickNavItem(item)">
              {{item.title}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logoImg from '@/assets/logo.png'
export default {
  name: 'Top',
  data () {
    return {
      showTop: false,
      nickname: '',
      loginStatus: '登录',
      ifShowMenu: false,
      showMenu: false,
      selectedClassfication: '',
      selectedNav: '',
      logoImageUrl: logoImg,
      inputContent: '',
      navList: [
        {
          name: 'View',
          title: '浏览接口',
          desc: ''
        },
        {
          name: 'All',
          title: '接口大全',
          desc: ''
        },
        {
          name: 'Help',
          title: '使用帮助',
          desc: ''
        }
      ],
      classifiction: []
    }
  },
  created () {
    if (this.$cookieStore.getCookie('userToken') !== '') {
      this.loginStatus = '个人中心'
      this.nickname = this.$localUser.get('userName')
      this.showTop = true
    }
    // 获取导航菜单目录
    this.handleLeftMenu()
  },
  methods: {
    // 获取导航菜单目录
    handleLeftMenu () {
      this.$http.get('/v1/category/getCategoryWidthNode').then(result => {
        if (result.data.code === 200) {
          this.classifiction = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: errMsg,
          type: 'error'
        })
      })
    },
    handleQuit () {
      this.$cookieStore.delCookie('userToken')
      this.showTop = false
      this.loginStatus = '登录'
      this.$router.replace('/')
    },
    clickNavItem (item) {
      this.selectedNav = item.name
      if (item.title) {
        document.title = 'API-' + item.title
      }
      if (item.name === 'View') {
        this.$router.push('/browse')
      } else if (item.name === 'All') {
        this.$router.push('/interfaceall')
      } else if (item.name === 'Help') {
        this.$router.push('/help')
      }
    },
    getShowMenuOver () {
      if (this.ifShowMenu) {
        this.showMenu = false
      } else {
        this.showMenu = true
      }
    },
    getShowMenuOut () {
      this.showMenu = false
    },
    getCategory (id) {
      this.selectedClassfication = id
    },
    getCategoryOut () {
      this.selectedClassfication = ''
    },
    handleGoLogin () {
      if (this.$cookieStore.getCookie('userToken') !== '') {
        this.handleMyHome()
      } else {
        this.$router.push('/login')
      }
    },
    handleGoRegeister () {
      this.$router.push('/regeister')
    },
    handleGoHome () {
      this.selectedNav = ''
      this.$router.push('/myhome')
    },
    handleMyHome () {
      this.$router.push('/background')
    }
  }
}
</script>

<style lang='less'>
.topWrapper {
  background-color: #FCFCFC;
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #E4E4E4;
  .topMiddle {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .topMiddleLeft {
      .icon-API {
        color: #ED6D00;
      }
      color: #999;
      font-size: 13px;
      padding: 5px 2px;
      span {
        margin-left: 5px;
      }
    }
    .topMiddleRight {
      padding: 5px 2px;
      .ulWrapper {
        display: flex;
        list-style: none;
        .liItemOne {
          i {
            margin-right: -15px;
            color: #999;
          }
        }
        .liItem {
          cursor: pointer;
          margin-left: 30px;
          color: #999;
          font-size: 13px;
        }
      }
    }
  }
}

.logoWrapper {
  background-color: #fff;
  .logoAndSearch {
    display: flex;
    justify-content: space-between;
    padding-top: 38px;
    padding-left: 2px;
    padding-right: 2px;
    width: 1200px;
    margin: 0 auto;
    height: 100px;
    .logo {
      cursor: pointer;
      width: 344px;
      height: 70px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
    }
    .search {
      width: 65%;
      display: flex;
      .searchLeft {
        width: 83%;
        .historyWrapper {
          margin-top: 2px;
          overflow: hidden;
          span {
            cursor: pointer;
            padding: 0px 10px;
            font-size: 12px;
            color: #999;
            &:hover {
              color: #FF8A00;
            }
          }
        }
      }
      .personal {
        margin-left: 20px;
      }
    }
  }
}

.menuWrapper {
  background-color: #fff;
  .menuMiddle {
    width: 1200px;
    margin: 0 auto;
    .menuAll {
      position: relative;
      display: flex;
      padding-left: 3px;
      padding-right: 3px;
      .menuTemp {
        width: 23%;
        .menuItemOne {
        line-height: 30px;
        padding: 5px 20px;
        color: white;
        font-size: 22px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        background-color: #ED6D00;
        margin-right: 30px;
      }
      .classification {
          z-index: 5;
          position: absolute;
          width: 244px;
          color: white;
          font-weight: bold;
          font-size: 14px;
          background-color: #3D4B4F;
          top: 40px;
          .classificationItem {
            padding: 16px 20px;
            border-bottom: 1px solid #475357;
            display: flex;
            justify-content: space-between;
            &:hover{
              background-color: #fff;
              color: #ED6D00;
              border-left: 1px solid #ED6D00;
            }
            &:last-child:hover {
              border-bottom: 1px solid #ED6D00;
            }
            .rightContent {
              border: 1px solid #ED6D00;
              border-left: 1px solid white;
              position: absolute;
              color: #666;
              left: 243px;
              top: 0px;
              padding: 20px 20px;
              width: 800px;
              background-color: #fff;
              height: 288px;
              .rightTitle {
                display: flex;
                border-bottom: 1px solid #E4E4E4;
                padding-bottom: 20px;
                font-size: 20px;
                .rightImageWrapper {
                  margin-right: 5px;
                  padding-top: 3px;
                  padding-right: 5px;
                  width: 22px;
                  height: 22px;
                  background-repeat: no-repeat;
                  background-size: cover;
                }
              }
              .rightCategory {
                .ulWrapper {
                  display: flex;
                  flex-wrap: wrap;
                  padding: 10px 20px;
                  li:hover {
                    color: #FF8A00;
                  }
                  .ulliItem {
                    width: 120px;
                    margin-right: 130px;
                    margin-bottom: 20px;
                  }
                }
              }
            }
          }
        }
      }
      .menuItemAll {
        margin-top: 5px;
        display: flex;
        height: 34px;
        margin-left: 50px;
        .menuItem {
          cursor: pointer;
          margin-right: 80px;
          color: #ED6D00;
          font-size: 22px;
          font-weight: bold;
          &:hover {
            border-bottom: 3px solid #ED6D00;padding-bottom: 8px;
          }
        }
      }
      .active {
        border-bottom: 3px solid #ED6D00;padding-bottom: 8px;
      }
    }
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
